<template>
	<div class="login">
		<div class="logo">
			<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1763813634,594868048&fm=26&gp=0.jpg" alt="">
		</div>
		<!-- 账号 -->
		<inputGroup type="text" v-model="username" placeholder="账号" />
		<!-- 密码 -->
		<inputGroup :type="inputTypes" v-model="password" placeholder="密码" :btnTitle="btnTitle" @btnClick="btnClicks"
		 :show_or_hidden_eye="show_or_hidden_eye" :inputType="inputType" />
		<!-- 验证码 -->
		<div class="yzm">
			<inputGroup type="number" v-model="captcha_code" placeholder="验证码" />
			<img :src="datas" alt="" @click="yzm">
		</div>

		<!-- 用户服务协议 -->
		<div class="login_des">
			<p>
				温馨提示：未经注册过的账号，登录时将自动注册
			</p>
			<p>
				注册过的用户可凭账号密码登陆
			</p>
		</div>
		<!-- 登陆按钮 -->
		<div class="login_btn">
			<button @click="btn">登录</button>
		</div>
		<div class="pop_up" v-show="isstatic">
			<img src="../../public/gantanhao.png" alt="">
			<p>{{ test }}</p>
			<p class="sure" @click="sure">确认</p>
		</div>
	</div>
</template>

<script>
	import inputGroup from "../components/inputGroup";
	import axios from 'axios';
	axios.defaults.withCredentials = true;
	export default {
		name: "login",
		data() {
			return {
				username: "",
				password: "",
				captcha_code: "",
				datas: "",
				btnTitle: " ",
				isstatic: false,
				test: "",
				inputType: false,
				inputTypes: "password",
				show_or_hidden_eye: '',
			};
		},
		created() {
			this.yzm();
		},
		methods: {
			btnClicks() {
				if (this.inputType == false) {
					this.inputTypes = 'text';
					this.inputType = true;
					this.show_or_hidden_eye = '/img/xianshi.1091f479.png';
				} else if (this.inputType == true) {
					this.inputTypes = 'password';
					this.inputType = false;
					this.show_or_hidden_eye = '/img/yincang.14c3faf8.png';
				}

			},
			sure() {
				this.isstatic = false;
			},
			yzm() {
				let obj = this;
				this.$axios({
					url: "https://elm.cangdu.org/v1/captchas",
					method: "post"
				}).then(function(res) {
					obj.datas = res.data.code,
						window.console.log(obj.datas)
					window.console.log(res);
				})
			},
			btn() {
				axios.interceptors.request.use(config => {
					// 在发送请求之前做些什么，例如加入token
					config.headers.Cookie = "cap=" + this.captcha_code;
					return config;
				}, function(error) {
					// 对请求错误做些什么
					return Promise.reject(error);
				});
				let obj1 = this;
				this.$axios({
					url: "https://elm.cangdu.org/v2/login",
					method: "post",
					data: {
						captcha_code: this.captcha_code,
						password: this.password,
						username: this.username
					}
				}).then(function(res) {
					window.console.log(res);
					window.console.log(obj1.captcha_code)
					if (res.data.username) {
						obj1.$router.push('/');
						obj1.$root.loginDatas = 1;
						window.console.log(obj1.$root.loginDatas);
						obj1.$root.$emit("logindata", res.data)
					} else if (res.data.message == "用户名参数错误") {
						obj1.isstatic = true;
						obj1.test = "请输入手机号/邮箱/用户名";
					} else if (res.data.message == "密码参数错误") {
						obj1.isstatic = true;
						obj1.test = "请输入密码";
					} else if (res.data.message == "验证码参数错误") {
						obj1.isstatic = true;
						obj1.test = "请输入验证码";
					} else if (res.data.message == "验证码不正确") {
						obj1.isstatic = true;
						obj1.test = "验证码错误";
					} else if (res.data.message == "密码错误") {
						obj1.isstatic = true;
						obj1.test = "密码错误";
					}
					obj1.yzm();
				}).catch(function(err) {
					window.console.log(err);
				})
			}
		},
		components: {
			inputGroup
		}
	};
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.login {
		width: 100%;
		height: 100%;
		padding: 60px;
		box-sizing: border-box;
		background: #fff;
	}

	.logo {
		text-align: center;
	}

	.logo img {
		width: 350px;
	}

	.text_group,
	.login_btn {
		margin-top: 30px;
	}

	.login_des {
		color: red;
		font-size: 15px;
	}

	.login_des span {
		color: #4d90fe;
	}

	.login_btn button {
		width: 100%;
		height: 80px;
		background-color: #48ca38;
		border-radius: 8px;
		color: white;
		font-size: 28px;
		border: none;
		outline: none;
	}

	.yzm {
		position: relative;
	}

	.yzm img {
		position: absolute;
		right: 0;
		top: 10px;
	}

	.pop_up {
		width: 580px;
		height: 316px;
		background: white;
		margin: 0 auto;
		border-radius: 20px;
		position: fixed;
		top: 480px;
		left: 80px;
		text-align: center;
	}

	.pop_up img {
		height: 120px;
		width: 120px;
	}

	.sure {
		color: white;
		background: #00FF00;
		padding: 20px 0;
		position: ;
		margin-top: 108px;
		font-size: 40px;
	}
</style>
